<!--********************************************************************
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>地图常用方法</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .btns {
            position: absolute;
            left: 10px;
            top: 10px;
            z-index: 10;
        }
    </style>
</head>

<body>
    <iframe id="mapFrame" src="" frameborder="0" style="width: 100vw;height: 100vh;"></iframe>
    <div class="btns">
        <button onclick="clearMarkers1()">清除所有点</button>
        <button onclick="clearMarkers2()">清除某类聚合点</button>
    </div>
</body>
<script type="text/javascript">
    // 初始化配置 和 样式配置
    // 可以注销 和 打开相关配置，查看变化效果
    document.getElementById('mapFrame').src = '../../map/index.html?name=澄江街道';
    window.$Config = {
        mapConfig: {
            useMask: '0'
        }
    }

    var mapWindow, lwmap, mapApp;
    window.mapLoaded = function (w, m, a) {
        mapWindow = w;
        lwmap = m;
        mapApp = a;
        addMarkers();
    };

    function handleMarkerClick(point) {
        var html = 
	  	`<div class="getMapPositionClass">
			<div class="title">标题</div>
			<div class="content">
				${point.id}
			</div>
		</div>`;
      lwmap.showInfoWindow(html, point.position)
      lwmap.setCenterAndZoom(point.position, 16)
    }

    function addMarkers() {
        var points = []; // 随机搞一堆点
        var points2 = []; // 随机搞一堆点

        new Array(500).fill(0).forEach((n, i) => {
            points.push({
                id: 'testid' + i,
                lng: 120.277266 + (0.5 - Math.random()) * 0.05,
                lat: 31.900939 + (0.5 - Math.random()) * 0.05,
                position: [120.277266 + (0.5 - Math.random()) * 0.05, 31.900939 + (0.5 - Math
                .random()) * 0.05
                ]
            });
        });
        new Array(500).fill(0).forEach((n, i) => {
            points2.push({
                id: 'testid' + i,
                lng: 120.277266 + (0.5 - Math.random()) * 0.05,
                lat: 31.900939 + (0.5 - Math.random()) * 0.05,
                position: [120.277266 + (0.5 - Math.random()) * 0.05, 31.900939 + (0.5 - Math
                .random()) * 0.05
                ]
            });
        });
        // type1 type2
        // 目前type1 支持population events location 几种， 一些依赖的图标文件写死在代码里面了，如果需要其他图标，需要小改lwmap__.js 
        lwmap.addMarkerCluster('population', 'p1', points, './static/imgs/map/canji.png', [26, 26], [13, 13], handleMarkerClick);
        lwmap.addMarkerCluster('events', 'p2', points2, './static/imgs/map/daichuli.png', [26, 26], [13, 13], handleMarkerClick);
    }
    function clearMarkers1 () {
        lwmap.clearAllClusterMarker();
    }
    function clearMarkers2 () {
        lwmap.removeClusterMarker('population', 'p1');
    }
</script>

</html>